<template>
  <div class="content">
    <vue-ueditor-wrap v-model="content" :editor-id="name + new Date().getTime()" :name="name" :config="editorConfig"
      :editorDependencies="['ueditor.config.js', 'ueditor.all.js']" />
  </div>
</template>
<script>
import VueUeditorWrap from "vue-ueditor-wrap";
import { getToken } from "@/utils/auth";
export default {
  components: {
    VueUeditorWrap,
  },
  props: {
    // 内容
    value: {
      type: String,
      default: "",
    },
    // name属性
    name: {
      type: String,
      default: "content",
    },
    // 最小高度
    minHeight: {
      type: Number,
      default: 500,
    },
    // 字数统计
    wordCount: {
      type: Boolean,
      default: true,
    },
    // 最大字数
    maxLength: {
      type: Number,
      default: 100000,
    },
    // 是否只读
    readonly: {
      type: Boolean,
      default: false,
    },
    // 自动保存
    autoSave: {
      type: Boolean,
      default: false,
    },
    // 显示元素路径
    elementPath: {
      type: Boolean,
      default: false,
    },
    // 编辑器层级
    zIndex: {
      type: Number,
      default: 3000,
    },
  },
  computed: {
    // 编辑内容
    content: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  data() {
    return {
      editorConfig: {
        UEDITOR_HOME_URL: "/UEditor/",
        serverUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
        serverHeaders: {
          Authorization: "Bearer " + getToken(),
        },
        focus: false, // 自动获得焦点
        imageActionName: "upload", // 防止上传报错
        imageFieldName: "file", // 上传图片时，file字段的属性名
        enableAutoSave: this.autoSave, // 自动保存
        // maxInputCount: this.maxLength, // 自动保存阈值数
        // saveInterval: this.maxLength * 1000, // 自动保存间隔时间 单位ms
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        elementPathEnabled: this.elementPath, // 元素路径显示
        initialFrameHeight: this.minHeight, // 初始容器高度
        initialFrameWidth: "100%", // 初始容器宽度
        wordCount: this.wordCount, // 字数统计
        // wordCountMsg: "", // 字数统计提示 默认：当前已输入 {#count} 个字符，您还可以输入{#leave} 个字符
        autoFloatEnabled: false, // 是否吸顶浮动
        maximumWords: this.maxLength, // 最大输入字数
        fullscreen: false, // 初始化全屏
        readonly: this.readonly, // 是否只读
        maxUndoCount: 20, // 可撤销次数
        tableDragable: true, // 表格是否可拖动
        zIndex: this.zIndex, // 层级
        catchRemoteImageEnable: true, // 是否抓取远程图片到本地保存
        enableContextMenu: true, // 是否启用右键菜单
        imagePopup: false, // 图片浮动
        //contextMenu:[ //右键菜单配置
        //    {
        //        label:'',       //显示的名称
        //        cmdName:'selectall',//执行的command命令，当点击这个右键菜单时
        //        //exec可选，有了exec就会在点击时执行这个function，优先级高于cmdName
        //        exec:function () {
        //            //this是当前编辑器的实例
        //            //this.ui._dialogs['inserttableDialog'].open();
        //        }
        //    }
        //],
        indentValue: "0", // 首行缩进
        pasteplain: false, // 是否为纯文本粘贴
        retainOnlyLabelPasted: false, // 只粘贴标签，去除标签所有属性
        allowDivTransToP: true, // div转为p标签
        rgb2Hex: true, // 是否将 RGB颜色 转化为 16进制
        lang: "zh-cn",
        // 自动排版参数
        // autotypeset: {
        //   mergeEmptyline: true,// 合并空行
        //   removeClass: true,// 去掉冗余的class
        //   removeEmptyline: false, // 去掉空行
        //   textAlign: "left",// 段落的排版方式，可以是 left,right,center,justify 去掉这个属性表示不执行排版
        //   imageBlockLine: "center", // 图片的浮动方式，独占一行剧中,左右浮动，默认: center,left,right,none 去掉这个属性表示不执行排版
        //   pasteFilter: false, // 根据规则过滤没事粘贴进来的内容
        //   clearFontSize: false,  // 去掉所有的内嵌字号，使用编辑器默认的字号
        //   clearFontFamily: false, // 去掉所有的内嵌字体，使用编辑器默认的字体
        //   removeEmptyNode: false, // 去掉空节点
        //   removeTagNames: { div: 1 },  // 可以去掉的标签
        //   indent: false, // 行首缩进
        //   indentValue: "2em", // 行首缩进的大小
        //   bdc2sb: false, // 全角转半角
        //   tobdc: false, // 半角转全角
        // },
        toolbars: [
          [
            "fullscreen", // 全屏
            // "source", // 源代码
            // "|",
            "undo", // 撤销
            "redo", // 重做
            "|",
            "bold", // 加粗
            "italic", // 斜体
            "underline", // 下划线
            "fontborder", // 字符边框
            "strikethrough", // 删除线
            "superscript", // 上标
            "subscript", // 下标
            "removeformat", // 清除格式
            "formatmatch", // 格式刷
            "autotypeset", // 自动排版
            "blockquote", // 引用
            "pasteplain", // 纯文本粘贴模式
            "|",
            "forecolor", // 字体颜色
            "backcolor", // 背景色
            "insertorderedlist", // 有序列表
            "insertunorderedlist", // 无序列表
            // "selectall", // 全选
            // "cleardoc", // 清空文档
            "|",
            "rowspacingtop", // 段前距
            "rowspacingbottom", // 段后距
            "lineheight", // 行间距
            "|",
            "customstyle", // 自定义标题
            "paragraph", // 段落格式
            "fontfamily", // 字体
            "fontsize", // 字号
            "|",
            "directionalityltr", // 从左向右输入
            "directionalityrtl", // 从右向左输入
            "indent", // 首行缩进
            "|",
            "justifyleft", // 居左对齐
            "justifycenter", // 居中对齐
            "justifyright",
            "justifyjustify", // 两端对齐
            // "|",
            // "touppercase", // 字母大写
            // "tolowercase", // 字母小写
            "|",
            "link", // 超链接
            "unlink", // 取消链接
            "anchor", // 锚点
            "|",
            "imagenone", // 图片默认
            "imageleft", // 图片左浮动
            "imagecenter", // 图片居中
            "imageright", // 图片右浮动
            "|",
            "simpleupload", // 单图上传
            // "insertimage", // 多图上传
            // "emotion", // 表情
            // "scrawl", // 涂鸦
            // "insertvideo", // 视频
            // "insertaudio", // 音频
            "attachment", // 附件
            // "insertframe", // 插入Iframe
            // "insertcode", // 插入代码
            // "pagebreak", // 分页
            // "template", // 模板
            "background", // 背景
            // "formula", // 公式
            "|",
            "horizontal", // 分隔线
            // "date", // 日期
            // "time", // 时间
            "spechars", // 特殊字符
            "wordimage", // Word图片转存
            "|",
            "inserttable", // 插入表格
            "deletetable", // 删除表格
            "insertparagraphbeforetable", // 表格前插入行
            "insertrow", // 前插入行
            "deleterow", // 删除行
            "insertcol", // 前插入列
            "deletecol", // 删除列
            "mergecells", // 合并多个单元格
            "mergeright", // 右合并单元格
            "mergedown", // 下合并单元格
            "splittocells", // 完全拆分单元格
            "splittorows", // 拆分成行
            "splittocols", // 拆分成列
            // "|",
            // "print", // 打印
            // "preview", // 预览
            // "searchreplace", // 查询替换
            // "|",
            // "contentimport", // 导入
            // "help", // 帮助
          ],
        ],
      },
    };
  },
};
</script>
